import React, { useState } from 'react';
import './index.scss'
import { SendOutlined } from '@ant-design/icons';
const Home = () => {
    const navList = [
        { label: '二手房', path: '/' },
        { label: '新房', path: '/' },
        { label: '租房', path: '/' },
        { label: '海外', path: '/' },
        { label: '商业办公', path: '/' },
        { label: '小区', path: '/' },
        { label: '经纪人', path: '/' }
    ]
    const tabList = [
        {
            title: "二手房",
            isMapIcon: true,
            placeholder: "请输入二手房名称"
        },
        {
            title: "新房",
            isMapIcon: false,
            placeholder: "请输入新房名称"
        },
        {
            title: "租房",
            isMapIcon: true,
            placeholder: "请输入租房位置"
        },
        {
            title: "商区",
            isMapIcon: true,
            placeholder: "请输入商区名称"
        }
    ]
    const [ind, setInd] = useState(0)
    return (
        <div className="home_page">
            <div className="home_box">
                <div className="home_header">
                    <div className="header_nav max_width">
                        <div className="logo">
                            链家
                        </div>
                        <div className="nav">
                            {navList.map(item => {
                                return <div key={item.label} className="nav_list">{item.label}</div>
                            })}
                        </div>
                    </div>
                    <div className="title">
                        <div className="big_title">
                            连接每个家的故事
                        </div>
                        <div className="small_title">
                            上海链家真实在售二手房 17353 套
                        </div>
                    </div>
                    <div className="search_inp max_width">
                        <div className="search_tab">
                            {tabList.map((item, index) => {
                                return <div className={ind === index ? "search_label active" : "search_label"} onClick={() => { setInd(index) }}>{item.title}</div>
                            })}
                        </div>
                        <div className="input_bar">
                            {tabList[ind].isMapIcon ? <SendOutlined /> : ''}
                            <input type="text" placeholder={tabList[ind].placeholder} />
                            <button>
                                开始找房
                            </button>
                        </div>
                    </div>
                </div>
                <div className="header_advertisement">

                </div>
                <div className="header_second">

                </div>
                <div className="header_campus">

                </div>
                <div className="header_new_house">

                </div>
                <div className="header_footer">

                </div>
            </div>
        </div>
    );
}



export default Home;
